<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="11">
        <el-card>
          <div slot="header" class="clearfix">
            <span>阈值设置</span>
          </div>
          <el-descriptions class="margin-top" direction="vertical" :column="3" border>
            <el-descriptions-item>
              <template slot="label">CPU占用率</template>
              <el-input placeholder="请输入CPU占用率" v-model="cpuUsage" ref="cpuUsage" size="small">
                <template slot="append">%</template>
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">内存占用率</template>
              <el-input placeholder="请输入内存占用率" v-model="memoryUsage" ref="memoryUsage" size="small">
                <template slot="append">%</template>
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">硬盘占用率</template>
              <el-input placeholder="请输入硬盘占用率" v-model="diskUsage" ref="diskUsage" size="small">
                <template slot="append">%</template>
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">功耗</template>
              <el-input placeholder="请输入功耗" v-model="powerWaste" ref="powerWaste" size="small">
                <template slot="append">W</template>
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">温度</template>
              <el-input placeholder="请输入温度" v-model="sensorTemperature" ref="sensorTemperature" size="small">
                <template slot="append">°C</template>
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">电压</template>
              <el-input placeholder="请输入电压" v-model="sensorVoltage" ref="sensorVoltage" size="small">
                <template slot="append">V</template>
              </el-input>
            </el-descriptions-item>
          </el-descriptions>
          <div style="text-align: right;padding-top: 20px;">
            <el-button type="primary" size="small" @click="saveThreshold">保 存</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>SNMP设置</span>
          </div>
          <el-descriptions class="margin-top" direction="vertical" :column="4" border>
            <el-descriptions-item>
              <template slot="label">IP</template>
              <el-input placeholder="请输入IP" v-model="ip" ref="ip" size="small"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">更新间隔</template>
              <el-input placeholder="请输入CPU占用率" v-model="interval" ref="interval" size="small">
                <template slot="append">秒</template>
              </el-input>
            </el-descriptions-item>
          </el-descriptions>

          <div style="text-align: right;padding-top: 20px;">
            <el-button type="primary" size="small" @click="saveSnmp">保 存</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="5">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>页面数据更新</span>
          </div>
          <el-descriptions class="margin-top" direction="vertical" :column="4" border>
            <el-descriptions-item>
              <template slot="label">更新间隔</template>
              <el-input placeholder="请输入CPU占用率" v-model="updateInterval" ref="updateInterval" size="small">
                <template slot="append">秒</template>
              </el-input>
            </el-descriptions-item>
          </el-descriptions>

          <div style="text-align: right;padding-top: 20px;">
            <el-button type="primary" size="small" @click="saveUpdateInterval">保 存</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cpuUsage: '',
      memoryUsage: '',
      diskUsage: '',
      powerWaste: '',
      sensorTemperature: '',
      sensorVoltage: '',
      ip: '',
      interval: '',
      updateInterval: ''
    };
  },
  methods: {
    saveThreshold() {
      if (parseFloat(this.cpuUsage).toString() === "NaN" || this.cpuUsage <= 0 || this.cpuUsage > 100) {
        this.$message.error("CPU占用率为大于0小于100数字");
        this.$refs.cpuUsage.focus();
        return false;
      }

      if (parseFloat(this.memoryUsage).toString() === "NaN" ||  this.memoryUsage <= 0 || this.memoryUsage > 100) {
        this.$message.error("内存占用率为大于0小于100数字");
        this.$refs.memoryUsage.focus();
        return false;
      }

      if (parseFloat(this.diskUsage).toString() === "NaN" || this.diskUsage <= 0 || this.diskUsage > 100) {
        this.$message.error("硬盘占用率为大于0小于100数字");
        this.$refs.diskUsage.focus();
        return false;
      }

      if (parseFloat(this.powerWaste).toString() === "NaN" || this.powerWaste <= 0) {
        this.$message.error("功耗为大于0的数字");
        this.$refs.powerWaste.focus();
        return false;
      }

      if (parseFloat(this.sensorTemperature).toString() === "NaN") {
        this.$message.error("温度为数字");
        this.$refs.sensorTemperature.focus();
        return false;
      }

      if (parseFloat(this.sensorVoltage).toString() === "NaN" || this.sensorVoltage <= 0) {
        this.$message.error("电压为正数");
        this.$refs.sensorVoltage.focus();
        return false;
      }

      const params = {
        cpuUsage: this.cpuUsage,
        memoryUsage: this.memoryUsage,
        diskUsage: this.diskUsage,
        powerWaste: this.powerWaste,
        sensorTemperature: this.sensorTemperature,
        sensorVoltage: this.sensorVoltage
      };
      this.$axios.post("/api/saveThreshold", params).then(data => {
        if (!data.status) {
          this.$notify({
            title: "成功",
            message: "阈值保存成功",
            type: "success"
          });
        }
      }).finally(() => {});
    },
    saveSnmp() {
      if (
        !/^(\d|\d\d|1\d\d|2[0-4]\d|25[0-5])(?:\.(\d|\d\d|1\d\d|2[0-4]\d|25[0-5])){3}$/.test(
          this.ip
        )
      ) {
        this.$message.error("请输入正确的IP");
        this.$refs.ip.focus();
        return false;
      }

      if (parseFloat(this.interval).toString() === "NaN" || Number(this.interval) <= 0) {
        this.$message.error("	更新间隔必须为大于0的数字");
        this.$refs.interval.focus();
        return false;
      }

      const params = {
        ip: this.ip,
        interval: this.interval
      };
      this.$axios.post("/api/saveSnmp", params).then(data => {
        if (data.status == 0) {
          this.$notify({
            title: "成功",
            message: data.msg,
            type: "success"
          });
        }
      }).finally(() => {});
    },
    saveUpdateInterval(){
      if (parseFloat(this.updateInterval).toString() === "NaN" || Number(this.updateInterval) <= 0 || Number(this.updateInterval) > 3600) {
        this.$message.error("	更新间隔必须为大于0、小于3600的数字");
        this.$refs.updateInterval.focus();
        return false;
      }
    },
    async getData() {
      const { threshold } = await this.$axios.get("/api/getData");
      this.ip = threshold.ip;
      this.interval = threshold.interval;
      this.cpuUsage = threshold.cpuUsage;
      this.memoryUsage = threshold.memoryUsage;
      this.diskUsage = threshold.diskUsage;
      this.powerWaste = threshold.powerWaste;
      this.sensorTemperature = threshold.sensorTemperature;
      this.sensorVoltage = threshold.sensorVoltage;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>